<template>
    <NCard>
        <NForm ref="formRef" size="small">
            <h3>KYC 资料</h3>
            <NGrid x-gap="24" responsive="screen" item-responsive>
                <NFormItemGi span="12" prop="uid" label="国家/地区">
                    <NSelect v-model:value="form.location" :options="countryList" clearable></NSelect>
                </NFormItemGi>
                <NFormItemGi span="12" prop="authEmail" label="邮箱">
                    <NInput v-model:value="form.authEmail" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="lastName" label="姓">
                    <NInput v-model:value="form.lastName" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="firstName" label="名">
                    <NInput v-model:value="form.firstName" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="lastNameEn" label="姓(EN)">
                    <NInput v-model:value="form.lastNameEn" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="firstNameEn" label="名(EN)">
                    <NInput v-model:value="form.firstNameEn" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="profession" label="职业">
                    <NInput v-model:value="form.profession" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="position" label="职位">
                    <NInput v-model:value="form.position" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
            </NGrid>
            <h3>收货信息</h3>
            <NGrid x-gap="24" responsive="screen" item-responsive>
                <NFormItemGi span="12" prop="petitioner" label="姓名">
                    <NInput v-model:value="form.petitioner" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="authMobileNumber" label="电话（+区号-号码， 例如：+86-18600000000）">
                    <NInput v-model:value="form.authMobileNumber" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
                <NFormItemGi span="12" prop="receiverAddress" label="住宅地址">
                    <NInput v-model:value="form.receiverAddress" clearable placeholder="请输入"></NInput>
                </NFormItemGi>
            </NGrid>
            <NButton type="primary" @click="handleSubmit" :loading="submitLoading">提交</NButton>
        </NForm>
    </NCard>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect } from 'vue'
import { queryCountryList, updateMasterCardKyc } from '@/api/card'
import { useMessage } from 'naive-ui'

const message = useMessage()
const countryList = ref<Common.Option<string>[]>([])

const props = defineProps<{
    id: number | undefined
    detail: Api.Card.MasterCardDetail | null
}>()

const form = reactive<Api.Card.KycDetailParams>({
    location: '',
    authEmail: '',
    lastName: '',
    firstName: '',
    lastNameEn: '',
    firstNameEn: '',
    position: '',
    profession: '',
    petitioner: '',
    authMobileNumber: '',
    receiverAddress: ''
})
queryCountryList().then(([err, res]) => {
    if (!err && res) {
        countryList.value = res.list.map(item => ({
            value: item,
            label: item
        }))
    }
})

watchEffect(() => {
    if (props.detail) {
        for (const k in form) {
            form[k as keyof Api.Card.KycDetailParams] = String(props.detail[k as keyof Api.Card.MasterCardDetail] ?? '')
        }
    }
})

const submitLoading = ref(false)
const handleSubmit = async () => {
    submitLoading.value = true
    const [err, res] = await updateMasterCardKyc(props.id!, form)
    submitLoading.value = false
    if (!err && res?.success) {
        message.success('提交成功')
    } else {
        message.error('提交失败')
    }
}
</script>
